<template>
	<div class="login-box">
		<div class="login-box-left"></div>
		<div class="login-box-right">
			<div class="login-form">
				<img src="@/assets/images/login/login-logo.png" class="login-logo" />
				<div class="login-input">
					<a-input @keypress.enter="login" placeholder="请输入账号" class="large-input" v-model:value="loginData.loginId">
						<template #prefix>
							<img src="@/assets/images/login/icon-user.png" />
						</template>
					</a-input>
				</div>
				<div class="login-input">
					<a-input @keypress.enter="login" placeholder="请输入密码" minlength="6" type="password" class="large-input" v-model:value="loginData.loginPw">
						<template #prefix>
							<img src="@/assets/images/login/icon-pwd.png" />
						</template>
					</a-input>
				</div>
				<div class="login-input">
					<a-input @keypress.enter="login" placeholder="请输入验证码" minlength="4" maxlength="4" class="large-input" v-model:value="loginData.captcha"></a-input>
					<img v-if="imgUrl" :src="imgUrl" @click="getValidateImage" class="code-image" />
				</div>
				<div style="text-align: left">
					<a-checkbox class="remember" v-model:checked="remember">记住密码</a-checkbox>
				</div>
				<div>
					<a-button type="primary" block class="login-btn" @click="login()">登录</a-button>
				</div>
			</div>
		</div>
		<!-- 二次验证 -->
		<a-modal v-model:visible="visible" title="二次验证" @ok="handleOk">
			<a-input placeholder="请输入第三方验证码" class="large-input" v-model:value="qrCode"></a-input>
		</a-modal>
	</div>
</template>

<script>
import httpRequest from "@/util/httpRequest";
import { Input, Checkbox, Button } from "ant-design-vue";
import { message, Modal } from "ant-design-vue";
export default {
  components: {
    AModal: Modal,
    AInput: Input,
    ACheckbox: Checkbox,
    AButton: Button
  },
  data() {
    return {
      qrCode: "",
      visible: false,
      userName: "",
      password: "",
      code: "",
      remember: false,
      loginData: {
        loginId: "",
        loginPw: "",
        clientId: "",
        captcha: ""
      },
      imgUrl: ""
    };
  },
  created() {},
  mounted() {
    this.remember = localStorage.getItem("remember")
      ? JSON.parse(localStorage.getItem("remember"))
      : false;
    if (this.remember) {
      const loginText = localStorage.getItem("loginData");
      if (loginText) {
        const login = JSON.parse(loginText);
        this.loginData.loginId = login.loginId;
        this.loginData.loginPw = login.loginPw;
      }
    }
    this.getValidateImage();
  },
  methods: {
    login() {
      let isError = false;
      for (const key in this.loginData) {
        if (!this.loginData[key]) {
          isError = true;
          switch (key) {
            case "captcha":
              message.warning("验证码不能为空");
              return;
            case "loginId":
              message.warning("用户名不能为空");
              return;
            case "loginPw":
              message.warning("密码不能为空");
              return;
          }
        }
      }
      if (this.loginData["loginPw"].length < 6) {
        isError = true;
        message.warning("密码长度不够，请确认密码是否输入正确。");
      }
      if (this.loginData["captcha"].length < 4) {
        isError = true;
        message.warning("请正确填写验证码");
      }
      if (!isError) {
        httpRequest
          .post("login", this.loginData)
          .then(res => {
            sessionStorage.setItem("user", JSON.stringify(res.data));
            sessionStorage.setItem("token", res.data.token);
            sessionStorage.setItem("refreshTime", new Date().getTime());
            localStorage.setItem("remember", this.remember);
            if (this.remember) {
              localStorage.setItem(
                "loginData",
                JSON.stringify({
                  loginId: this.loginData.loginId,
                  loginPw: this.loginData.loginPw
                })
              );
            }
            if (res.data.otpStatus == "Y") {
              this.visible = true;
            } else {
              this.$router.push("/home");
            }
          })
          .catch(() => {
            this.getValidateImage();
          });
      }
    },
    getValidateImage() {
      httpRequest.get("captcha", {}).then(res => {
        this.imgUrl = res.data.captcha;
        this.loginData.clientId = res.data.clientId;
      });
    },
    handleOk() {
		if (this.qrCode) {
			// eslint-disable-next-line no-unused-vars
			httpRequest.post("二次登录验证", {authCode:this.qrCode}).then(res => {
				this.$router.push("/home");
			});
		}else{
			message.warning("请正确填写验证码");
		}
    }
  }
};
</script>

<style lang="less" scoped>
.login-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  &-left {
    flex: 100;
    height: 100%;
    background: url("~@/assets/images/login/login-bg.png") center center
      no-repeat;
    background-size: 100% 100%;
    position: relative;
    .text {
      position: absolute;
      left: 60px;
      top: 80px;
    }
  }
  &-right {
    flex: 92;
    background: #fff;
    .login-logo {
      margin-bottom: 60px;
    }
    .login-form {
      width: 480px;
      display: block;
      margin: 100px auto;
      .forget {
        float: right;
      }
      .remember {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .login-input {
        margin-bottom: 30px;
        display: flex;
        .code-image {
          width: 112px;
          height: 48px;
          margin-left: 10px;
        }
      }
    }
    .large-input {
      padding: 12px 11px;
      border-radius: 5px;
    }
    .login-btn {
      height: 48px;
      line-height: 48px;
      padding: 0;
      border-radius: 10px;
      margin-top: 85px;
      margin-bottom: 15px;
      font-size: 20px;
    }
  }
}
</style>
